<template>
  <div class="app-container">
    <div class="flex-box">
      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入用户联系方式" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>

      <div class="item">
        <el-input v-model="searchuid" placeholder="请输入用户ID" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>

      <div class="item">
        <el-select v-model="status" placeholder="请选择充值状态" @change="getList">
          <el-option
            :key="0"
            label="全部状态"
            :value="null"
          />
          <el-option
            v-for="item in statuslist"
            :key="item.val"
            :label="item.lab"
            :value="item.val"
          />
        </el-select>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="提现ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户名称">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="提现金额">
        <template slot-scope="scope">
          <span>{{ scope.row.number/100 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户电话">
        <template slot-scope="scope">
          <span>{{ scope.row.contact }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户邮箱">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易状态">
        <template slot-scope="scope">
          <span>{{
            scope.row.transtatus == 1 ? '审核中' :
            scope.row.transtatus == 2 ? '审核成功' :
            scope.row.transtatus == 3 ? '审核失败' : '未支付'
           }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="提现凭证">
        <template slot-scope="scope">
          <span>
            {{ scope.row.evidence }}
          </span>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" label="银行卡号">
        <template slot-scope="scope">
          <span>{{ scope.row.bankcard }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="开户行">
        <template slot-scope="scope">
          <span>{{ scope.row.paybank }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="付款对象">
        <template slot-scope="scope">
          <span>{{ scope.row.toname }}</span>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.transtatus==1" @click="widrSetShow(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="审核" :visible.sync="dialogWidrVisible" class="users" center width="95%">
      <el-form ref="ruleForm" :model="widrlistInfo" label-width="100px">
        <el-form-item label="用户名">
          <span>{{ widrlistInfo.username }}</span>
        </el-form-item>
        <el-form-item label="用户联系方式">
          <span>{{ widrlistInfo.contact }}</span>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <span>{{widrlistInfo.email}}</span>
        </el-form-item>
        <el-form-item label="提现金额">
          <span>{{(widrlistInfo.number/100).toFixed(2)}}</span>
        </el-form-item>
        <el-form-item label="付款对象">
          <span>{{widrlistInfo.cardowner}}</span>
        </el-form-item>
        <el-form-item label="开户行">
          <span>{{widrlistInfo.bankname}}</span>
        </el-form-item>
        <el-form-item label="银行卡号">
          <span>{{widrlistInfo.bankcard}}</span>
        </el-form-item>
        <!-- <el-form-item> -->
          <div style="display:flex">
            <el-button @click="sumbit(2)">
              通过
            </el-button>

            <el-button @click="sumbit(3)">
              拒绝
            </el-button>
          </div>

        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { getWidr, drawSet } from "@/api/cume"
  import Pagination from '@/components/Pagination'
  export default {
    name: 'WidrList',
    components: { Pagination },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20
        },
        searchcontent: '',
        status: null,
        statuslist: [
          {val: 1,lab: '审核中'},
          {val: 2,lab: '审核成功'},
          {val: 3,lab: '审核失败'}
        ],
        searchuid: null,
        dialogWidrVisible: false,
        selectId: null,
        widrlistInfo: {}
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        const search = { searchcontent: this.searchcontent, status: this.status, uid: this.searchuid }
        const postdata = { ...this.listQuery, ...search }
        getWidr(postdata).then((response) => {
          const { data } = response
          console.log(response, 'getOrder')
          this.list = data.list
          this.total = data.total
          this.listLoading = false
        })
      },
      widrSetShow(row) {
        console.log(row)
        this.widrlistInfo = row
        this.dialogWidrVisible = true
      },
      sumbit(val) {
        drawSet({id: this.widrlistInfo.id, status: val}).then(res=>{
          if(res.code == 0) {
            if(val == 2){
              this.$message({
                type: 'success',
                message: '提现通过'
              })
            }else{
              this.$message({
                type: 'warning',
                message: '提现拒绝'
              })
            }
            this.dialogCageVisible = false
            this.getList()
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .app-container{
    .search{
      width: 400px;
      margin-bottom: 20px
    }
  }
  .left-s .el-input {
    width: 110px;
  }
  .input-with-select .el-input-group__prepend {
    // background-color: #fff;
  }
</style>
